<template>
    <div class="goods-list">
        <div class="nav">
            <ul>
                <li class="text">排序：</li>
                <li>默认</li>
                <li>销量</li>
                <li>好评</li>
                <li>新品</li>
            </ul>
        </div>
        <div class="goods">
                <goods-item v-for="(item, index) in goods" :key="index" :item="item" @click.native="detail(item._id)"></goods-item>
        </div>

    </div>
</template>

<script>
    import GoodsItem from "./GoodsItem";

    import {sendwithpost} from "../../../network/profile";

    export default {
        name: "GoodsList",
        props: {
            goods: {
                type: Array,
                default: []
            }
        },

        components: {
            GoodsItem
        },
        methods: {
            detail(item) {
                // this.$router.push({
                //     path:'/detail',
                //     query: {
                //         goods: item
                //     }
                // })
                this.$router.push({path: '/detail',query: {
                    goodsId: item,
                    }})
                if (this.$store.state.lognUser) {
                    sendwithpost({
                        url: '/addfootfrint',
                        data: {
                            id: item
                        }
                    }).then(res=> {
                        if (res.data.res_code == 2) {
                            this.$store.commit('footFrint', {
                                id: item,
                                plus: true
                            })
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .goods-list {
        width: 100%;
        margin: 0 auto;
        padding-left: 3rem;
    }
    .nav {
        border-bottom: 1px solid #cccccc;
        display: flex;
    }
    ul {
        list-style-type: none;
        display: flex;
        justify-content: flex-start;
    }
    ul li {
        width: 50px;
        text-align: center;
        border: 1px solid #cccccc;
        margin: 0 3px -13px;
        cursor: pointer;
        line-height: 31px;
        font-size: 12px;
        font-weight: bold;
    }
    ul li:not(.text):hover {
        background: linear-gradient(rgb(206, 206, 206), rgb(255,255,255));
    }
    .text {
        cursor: text;
        border: none;
    }
    .goods {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        margin: 0 auto;
    }

</style>